<template>
	<view class="iflex aic asc jcsb order-status">
		<view class="iflex column aic jcsb order-status__item">
			<text class="order-status__item__count">{{stat.orderCount}}</text>
			<text class="order-status__item__text">全部</text>
		</view>

		<view class="iflex column aic jcsb order-status__item">
			<text class="order-status__item__count">{{stat.confirmedOrderCount}}</text>
			<text class="order-status__item__text">待完成</text>
		</view>

		<view class="iflex column aic jcsb order-status__item">
			<text class="order-status__item__count">{{stat.reviewOrderCount}}</text>
			<text class="order-status__item__text">待评论</text>
		</view>

		<view class="iflex column aic jcsb order-status__item">
			<text class="order-status__item__count">{{stat.overtimeOrderCount}}</text>
			<text class="order-status__item__text">已过期</text>
		</view>

		<view class="iflex column aic jcsb order-status__item">
			<text class="order-status__item__count">{{stat.completedOrderCount}}</text>
			<text class="order-status__item__text">已完成</text>
		</view>
	</view>
</template>

<script lang="ts">
	import { defineComponent } from "vue"
	export default defineComponent({
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true,
			// styleIsolation: 'shared'
		},
		// #endif
	})
</script>

<script setup lang="ts" name="OrderStatus">
	import { ref, onMounted } from 'vue';
	import { getTradeListAssignOrder, getOrderStat } from '@/apis/trade';
	const stat = ref({
		orderCount: 0,
		confirmedOrderCount: 0,
		reviewOrderCount: 0,
		overtimeOrderCount: 0,
		completedOrderCount: 0,
	});

	onMounted(() => {
		getOrderStat().then((res) => {
			stat.value = {
				orderCount: 0,
				confirmedOrderCount: 0,
				reviewOrderCount: 0,
				overtimeOrderCount: 0,
				completedOrderCount: 0,
				...(res.data ?? {})
			}
		});
	});
</script>

<style lang="scss">
	.order-status {
		margin-top: 32rpx;
		padding: 0 26rpx;
		width: 690rpx;
		height: 170rpx;
		flex-shrink: 0;
		border-radius: 12rpx;
		background: linear-gradient(90deg, #FFAC70 4.06%, #FF7B1B 100%);

		&__item {
			height: 106rpx;

			&__count {
				color: #ffffff;
				font-size: 40rpx;
				font-weight: 600;
			}

			&__text {
				color: #ffffff;
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}
</style>